<template>
  <div style="height: 620px">
    <el-tabs v-model="activeName" @tab-click="changeTab">
      <el-tab-pane
        v-for="item in vm.tabs"
        :label="item"
        :name="item"
      ></el-tab-pane>
    </el-tabs>
    <div >
      <div class="line_chart" :id="idName" style="height: 580px">折线图</div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, toRefs, computed, onMounted, watch } from "vue";
import {
  paramsFun,
  $fullUrl,
  $toTime,
  $banseUrl,
  $check_action,
  $getUrlParams,
} from "@/utils/utils.js";
import { useRouter, useRoute } from "vue-router";
import storageHelper from "@/libs/StorageHelper";
let user_id = storageHelper.getUserInfo().user_id;
let router = useRouter();
const emit = defineEmits(["changeTab"]);
const props = defineProps({
  idName: {
    type: String,
    default: "lineChart",
  },
  title: {
    type: String,
    default: "XXX折线图",
  },
  vm: {
    type: Object,
    default: function () {
      return {
        xAxis: "xAxis",
        names: "names",
        values: "values",
      };
    },
  },
  avg: {
    type: Boolean,
    default: false,
  },
});
let checkedList = ref([]);
let { idName, title, vm, avg } = toRefs(props);
const series = computed(() => {
  var list = vm.value.names;
  var values = vm.value.values;
  let labelOption = {
    show: true,
    position: "insideBottom",
    distance: 15,
    align: "left",
    verticalAlign: "middle",
    rotate: 90,
    formatter: "{c}  {name|{a}}",
    fontSize: 16,
    rich: {
      name: {},
    },
  };
  var seriesArr = [];
  for (let i = 0; i < list.length; i++) {
    let data = [];

    if (avg.value) {
      data = values[i];
    } else {
      for (let j = 0; j < values.length; j++) {
        data.push(values[j][i]);
      }
    }
    let dict_type = {
      barWidth: 50,
      name: list[i],
      type: "bar",
      barGap: 0,
      label: labelOption,
      emphasis: {
        focus: "series",
      },
      data: data,
    };
    seriesArr.push(dict_type);
  }
  return seriesArr;
});
let activeName = ref("1111");
let option = ref({
  title: {
    text: "XXX折线图",
    left: "center",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    type: "scroll",
    orient: "horizontal",
    y: "bottom",
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: [
    {
      type: "category",
      axisTick: {
        show: false,
      },
      data: [],
    },
  ],
  yAxis: [
    {
      type: "value",
    },
  ],
  series: [],
});
let changeTab = (e) => {
  emit("changeTab", activeName.value);
};
let init_chart = () => {
  var optionObj = option.value;

  var titleObj = title.value;
  if (titleObj) {
    optionObj.title.text = titleObj;
  }

  // var series = ;
  optionObj.series = series.value;

  var xAxis = optionObj.xAxis[0];
  xAxis.data = vm.value.xAxis;

  if (xAxis.data.length > 4) {
    optionObj.axisLabel = {
      interval: 0, //使x轴文字显示全
      formatter: function (params) {
        let newParamsName = "";
        const paramsNameNumber = params.length; // 文字总长度
        const provideNumber = 4; //一行显示几个字
        const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
        if (paramsNameNumber > provideNumber) {
          for (let p = 0; p < rowNumber; p++) {
            const start = p * provideNumber;
            const end = start + provideNumber;
            const tempStr =
              p === rowNumber - 1
                ? params.substring(start, paramsNameNumber)
                : params.substring(start, end) + "\n";
            newParamsName += tempStr;
          }
        } else {
          newParamsName = params;
        }
        return newParamsName;
      },
    };
  }
  if (document.getElementById(idName.value) == null) {
    return;
  }
  let myChart = echarts.init(document.getElementById(idName.value));
  myChart.setOption(optionObj);
};

watch(series, (newValue, oldValue) => {
  if (newValue) {
    init_chart();
  }
});
onMounted(() => {
  console.log(vm.value);
  activeName.value = vm.value.tabs[0];
  init_chart();
});
</script>
